<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<meta charset="UTF-8">
		<title>云茗茶坊</title>
				<link rel="stylesheet" href="css/shop.css" />
	</head>
	<body>
		<div id="nav">您的位置：
			<a href="#">首页</a>&gt;
			<a href="#">云茗商店</a>&gt;我的购物车</div>
		<div id="content">
			<form action="" method="post" name="myform">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
					<tr class="a">
						<td class="title_1"><input id="allCheckBox" type="checkbox" value="" />全选</td>
						<td class="title_2" colspan="2">店铺宝贝</td>
						<td class="title_3">获积分</td>
						<td class="title_4">单价（元）</td>
						<td class="title_5">数量</td>
						<td class="title_6">小计（元）</td>
						<td class="title_7">操作</td>
					</tr>
					<tr>
						<td colspan="8" class="line"></td>
					</tr>
					<tr class="a">
						<td colspan="8" class="shopInfo">店铺:
							<a href="#">云茗茶坊</a>卖家:
							<a href="#">小茗</a>
						</td>
					</tr>
					<tr id="product1">
						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" /></td>
						<td class="cart_td_2"><img src="images/img/top .png" alt="shopping" /></td>
						<td class="cart_td_3">
							<a href="#">中国茶叶历史悠久、种类繁多 碧螺春、信阳毛尖、西湖龙井、君山银针
							</a><br /> 红茶
							<br /> </td>
						<td class="cart_td_4">5</td>
						<td class="cart_td_5">138.00</td>
						<td class="cart_td_6"><img src="images/img/aa.png" alt="minus" class="hand" /> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly" /> 
							<img src="images/img/c.png" alt="add" class="hand" /></td>
						<td class="cart_td_7"></td>
						<td class="cart_td_8">
							<a href="javascript:void(0);">删除</a>
						</td>
					</tr>
					<tr class="a">
						<td colspan="3">
							<a id="deleteAll" href="javascript:void(0);"><img src="images/img/l.png" alt="delete" /></a>
						</td><br />
						<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元
                       <!--   可获积分 <label class="yellow" id="integral"></label> 点<br /> -->
							<br /><input name=" " type="image" src="images/img/g.png" /></td>
					</tr>
				</table>
			</form>
		</div>
	</body>

</html>
<script type="text/javascript">
	$(function() {
		//点击复选框全选或全不选效果
		$("#allCheckBox").click(function() {
			var checked = $(this).is(":checked");
			$(".cart_td_1").children().attr("checked", checked);
			//is判断属性值有没有被选上时一种状态
			//attr("")设置或返回匹配元素的属性和值
			//children() 函数获取指定节点的子节点。
		});
		//判断是否全选
		function ifAllChecked() {
			var checkedBoxs = $(".cart_td_1").children();
			var sum = checkedBoxs.size();
			var k = 0;
			checkedBoxs.each(function(index, dom) {
				if($(dom).is(":checked")) k++;
			});
			if(k == sum) {
				$("#allCheckBox").attr("checked", true);
			} else {
				$("#allCheckBox").attr("checked", false);
			}
		}
		ifAllChecked(); //页面加载完后运行
		//单选判断
		$(".cart_td_1").children().click(function() {
			ifAllChecked();
		});

		//计算总价与小计
		function productCount() {
			var $tr = $("#shopping").find("tr[id]");
			var summer = 0;
			var integral = 0;
			$tr.each(function(i, dom) {
				var num = $(dom).children(".cart_td_6").find("input").val(); //商品数量
				var price = num * $(dom).children(".cart_td_5").text(); //商品小计
				$(dom).children(".cart_td_7").html(price); //显示商品小计
				summer += price; //总价
				integral += $(dom).children(".cart_td_4").text() * num; //积分
			});
			$("#total").text(summer);
			$("#integral").text(integral);
		}
		productCount(); //页面加载完后运行

		//商品增加减少，flag为true时增加，flag为false时减少
		function changeNumber(dom, flag) {
			var $input = $(dom).parent().find("input");
			var value = $input.val();
			if(flag) {
				value++;
			} else {
				value--;
				if(value <= 0) {
					value = 1;
					alert("宝贝数量必须大于0");
				}
			}
			$input.val(value);
			productCount();
		};
		//点击增加
		$(".cart_td_6").find("img[alt='minus']").click(function() {
			changeNumber(this, false);
		});
		//点击减少
		$(".cart_td_6").find("img[alt='add']").click(function() {
			changeNumber(this, true);
		});

		//点击删除
		$(".cart_td_8").find("a").click(function() {
			$(this).parent().parent().prev().remove(); //删除前一tr
			$(this).parent().parent().remove(); //删除当前tr
			productCount();
		});
		//点击删除所选
		$("#deleteAll").click(function() {
			$("#shopping").find("tr[id]").each(function(i, e) {
				var $tr = $(e);
				var checked = $tr.children(".cart_td_1").children().is(":checked");
				if(checked) {
					$tr.prev().remove();
					$tr.remove();
				}
			});
			productCount();
		});
	});
</script>